<template>
  <ElDialog
    v-model="model"
    width="800"
    destroy-on-close
    lock-scroll
    draggable
    :show-close="false"
    custom-class="com-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="px-8 pb-6 ">
      <h2 class="text-28px font-700 mb-16px text-center">
        {{ props.consentData?.formName }}
      </h2>
      <div
        v-if="props.consentData?.contentHtml"
        class="text-15px leading-26px text-gray-600 max-h-55vh overflow-y-auto"
        v-html="props.consentData.contentHtml"
      ></div>
    </div>
    <!--添加基础信息-->
    <!-- <div class="my-16px text-16px font-600 text-primary text-center color-primary"
    >基础信息填写</div> -->
    <!-- <div class="px-8 pb-4 flex justify-center">
      <el-form ref="formRef" :model="profile" :rules="rules" label-width="100px" class="base-form">
        <el-form-item label="年龄" prop="age" required>
          <el-input-number v-model="profile.age" :min="1" class="!w-200px" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" required>
          <el-radio-group v-model="profile.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="教育程度" prop="education" required>
          <el-select v-model="profile.education" placeholder="请选择" class="!w-200px">
            <el-option label="小学" value="小学" />
            <el-option label="中学" value="中学" />
            <el-option label="高中" value="高中" />
            <el-option label="大学及以上" value="大学及以上" />
          </el-select>
        </el-form-item>
        <el-form-item label="婚姻状态" prop="maritalStatus" required>
          <el-select v-model="profile.maritalStatus" placeholder="请选择" class="!w-200px">
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异/丧偶" value="离异/丧偶" />
          </el-select>
        </el-form-item>
      </el-form>
    </div> -->
    <template #footer>
      <div class="w-1/1 flex items-center justify-end gap-12px">
        <el-button @click="close"> 取消 </el-button>
        <el-button type="primary" @click="agree">同意并继续</el-button>
      </div>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
import * as ExamApi from '@/api/dt/examtasks'
import { useUserStore } from '@/store/modules/user'

const props = defineProps<{ modelValue: boolean; consentData?: any; jobId?: number }>()
const emit = defineEmits(['update:modelValue', 'agree'])

const model = computed({
  get: () => props.modelValue,
  set: (v: boolean) => emit('update:modelValue', v)
})

const expanded = ref(false)
const close = () => emit('update:modelValue', false)

const formRef = ref()
const userStore = useUserStore()
const profile = reactive<{
  age: number | null
  gender: string
  education: string
  maritalStatus: string
}>({ age: null, gender: '', education: '', maritalStatus: '' })
const rules = {
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  education: [{ required: true, message: '请选择教育程度', trigger: 'change' }],
  maritalStatus: [{ required: true, message: '请选择婚姻状态', trigger: 'change' }]
}

const agree = async () => {
  try {
    const userId = userStore.user?.id
    await ExamApi.examUserSubmitConsent(userId,props.jobId)
    emit('update:modelValue', false)
    emit('agree')
  } catch (error) {}
}
</script>

<style scoped>
.com-dialog {
  .el-dialog__header {
    display: none !important;
  }
}
.com-dialog {
  .el-dialog__body {
    padding-top: 0 !important;
  }
}

/* 基础信息区域宽度设置，外层用 flex 居中 */
.base-form {
  width: 360px;
}
</style>
